Skip to content

[refactor] 메인 화면과 달력 뷰 리팩토링#239

Open
P1su wants to merge 29 commits intodevelopfrom
refactor/#237-main_ui_refactor
Open

[refactor] 메인 화면과 달력 뷰 리팩토링#239
P1su wants to merge 29 commits intodevelopfrom
refactor/#237-main_ui_refactor

Conversation

@P1su
Copy link
Copy Markdown
Member

@P1su P1su commented Sep 5, 2024

Related Issue 🍫

Summary 🍪

  • slick 구조를 해체하였습니다.
  • 라우트를 설정하여 달력 페이지를 새롭게 만들었습니다 ! 코드는 기존 소민님 달력 코드를 그대로 썼습니다 ~ 감사합니다!
  • 메인 페이지의 전체적인 컴포넌트 배치를 수정하였습니다.
  • 이 과정에서 메인 페이지를 이루는 컴포넌트 폴더들을 간소화하였고, 네이밍을 조금 더 직관적으로 수정하였습니다, (ThisMonthEmotion -> MonthlyEmotion)
  • 중첩되는 스타일 코드 역시 수정해주었습니다.
  • 메뉴 헤더를 새롭게 생성하였습니다. 스크롤을 해도 위치가 고정되어야 해서, fixed 속성을 부여했습니다.
  • 컴포넌트 재사용을 위해서 현재 도메인 주소를 받아와 해당 페이지에 맞는 버튼을 렌더링하도록 하였습니다.

Before i request PR review 🍰

  • 뭔가 겹치는 컴포넌트들이 많이 생겨서... 어쩔 수 없이 z-index를 남발하게 되었습니다. 더 좋은 방법이 있다면 바로 반영하겠습니다 :(
  • 플레이리스트 부분은 .. 협의가 필요할 것 같아서 추후에 이슈 생성 후 다시 진행하도록 하겠습니다 !
  • 검색 버튼 이벤트 핸들러에 임시로 alert 함수만 작성해두었습니다 ! @hoeun0723 호은님이 페이지 작업중이라, 라우트 설정도 하셨을 것 같아서 ... 이어서 작업해주시거나, 이것도 추후에 이슈 파서 진행하도록 하였습니다. ! 뭔가 물어보고 같이 상의했으면 좋았을 것 같은데, 제가 임의 판단 해버렸네요ㅎ... 다음부터는 주의하겠습니다. 감사합니다 !
0905.mp4

P1su added 22 commits August 28, 2024 12:30
@P1su P1su added refactor 기능 보완 관련 태그입니다. style 자잘한 스타일 수정 및 코드 수정입니다. labels Sep 5, 2024
@P1su P1su self-assigned this Sep 5, 2024
@vercel
Copy link
Copy Markdown

vercel bot commented Sep 5, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
sanhak-client ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 16, 2024 1:45pm

Copy link
Copy Markdown
Collaborator

@funcsom funcsom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

우선 정말 홈화면 완성까지 제가 너무 질질끌어서 늦어진 점 죄송합니다ㅜㅜㅜㅜ 그리고 정말 고생 많으셨습니다.. 기존의 코드를 이해하고 수정한다는게 정말 쉽지 않은건데도 불구하고 너무 잘해주셨네요...! 정말 체고예욤....

추가로 제가 피그마에서 언급하는 것을 까먹은 점들이 몇가지 있는데..., 홈화면 곰돌이가 조금 커졌습니다! 반영해주시면 더 풍성한 홈화면이 될 수 있을 것 같아요 ㅎㅎ 그리고 달력 컴포넌트 위치가 header 바로 밑에 붙었답니다!! 그러면 아래의 일기조회 컴포넌트가 더 잘 보일 것 같아요!

항상 고생하십니다 감사합니다..!

@P1su
Copy link
Copy Markdown
Member Author

P1su commented Sep 5, 2024

우선 정말 홈화면 완성까지 제가 너무 질질끌어서 늦어진 점 죄송합니다ㅜㅜㅜㅜ 그리고 정말 고생 많으셨습니다.. 기존의 코드를 이해하고 수정한다는게 정말 쉽지 않은건데도 불구하고 너무 잘해주셨네요...! 정말 체고예욤....

추가로 제가 피그마에서 언급하는 것을 까먹은 점들이 몇가지 있는데..., 홈화면 곰돌이가 조금 커졌습니다! 반영해주시면 더 풍성한 홈화면이 될 수 있을 것 같아요 ㅎㅎ 그리고 달력 컴포넌트 위치가 header 바로 밑에 붙었답니다!! 그러면 아래의 일기조회 컴포넌트가 더 잘 보일 것 같아요!

항상 고생하십니다 감사합니다..!

감사합니다 ! 작업 속도에 관해서는 전혀....죄송해하지 않아도 됩니다 ㅠㅠㅠ 다들 바쁘게 살고 있어서 ㅎㅎ... 부담 없이 진행했음 합니다 !

허니베어와 달력 컴포넌트 스타일은 수정해서 반영하겠습니다 ! 감사합니다 )

@P1su P1su requested a review from hoeun0723 September 9, 2024 12:44
Copy link
Copy Markdown
Member

@hoeun0723 hoeun0723 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생 많으셨습니다 !!

Comment on lines +13 to +14
//라우트 설정 완료되면 주석 해젷 사용하심 될 것 같습니다 !
//navigate('/search');
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 : )

Comment on lines +25 to +34
const getSegment = () => {
const location = useLocation();
const path = location.pathname;
const segments = path.split('/').filter(Boolean);
const firstSegment = segments[0];

return firstSegment;
}

const segment = getSegment();
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 state를 useState로 하지 않은 이유가 있을까요 ~??

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MenuHeader 라는 하위 컴포넌트가 Main 컴포넌트와 CalendarPage 컴포넌트라는 완전히 다른 부모 컴포넌트를 가지며 공통된 부모 컴포넌트가 없기 때문에 state 를 하나의 변수로 관리하는 것이 어렵다고 판단하였습니다 !

Comment on lines +11 to +24
const handleSearch = () => {
alert('삐용');
//라우트 설정 완료되면 주석 해젷 사용하심 될 것 같습니다 !
//navigate('/search');
};
const handleCalendar = () => {
navigate('/calendar');
};
const handleMyPage = () => {
navigate('/myPage');
};
const handleMain = () => {
navigate('/main');
};
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반복되는 코드들과 함수들은 이렇게 따로 빼는것이 아니라, 직접 작성하거나, list 형식으로 만들면 좋을 거 같아요 !!

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 부분은 수정하겠습니다 !!

export const WeatherPlaylistWrapper = styled.div`
width: 100%;
margin-top: 19rem;
z-index: 100;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

main 에서 이 부분에 z-index를 써준 이유는 뒤에 곰돌이 때문이려나요 ~??

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

맞습니다 ㅠㅠㅠ 곰돌이...
그런데 오늘 회의 결과 날씨 부분은 빼기로 하여서, 아마 삭제할 것 같습니다.

background: #C7C7C7;
`
display: flex;
width: 32.0rem;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요기 .0 지워도 될거 같습니다 : )

Comment on lines +7 to +8
export const CalendarIcon = styled(IcCalendarIcon)`
`; No newline at end of file
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이제 와서 보니 Ic 태그들을 이렇게 속성이 없어도 스타일로 선언하는게 맞나.. 생각이 드네요. 해당 내용 공부하고 내용 공유 한번 해드릴게요 !! 같이 이야기 해봐요

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

맞아요,,, css 속성 적용도 잘 안 되던데 이렇게 하는 게 맞는 방법인가? 생각하면서도 그냥 무지성으로 해버리는....
코드를 작성하는 경험도 다양하게 해보고 싶은데, 저렇게 부수적으로 공부해야될 부분들도 참 많은 것 같네요 ㅠㅠ
저도 해당 부분 관련 내용 한번 찾아보겠습니다 !!

Copy link
Copy Markdown
Collaborator

@funcsom funcsom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor 기능 보완 관련 태그입니다. style 자잘한 스타일 수정 및 코드 수정입니다.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants